<template>
  <div class="box-purchase" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div class="data-screen-card" :style="{ height: Height }">
          <div class="card-title">
            <span>请购单据统计</span>
          </div>
          <div class="card-content">
            <BiBaseChart :option="purchaseRequisitionOption" />
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-row :gutter="20">
          <el-col :span="10" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>采购统计 </span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="purchaseOption" />
              </div>
            </div>
          </el-col>
          <el-col :span="8" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>入库总金额</span>
              </div>
              <div v-if="totalAmountOfStorage" class="card-content">
                <Liquidfill :value="totalAmountOfStorage" viewFormat="num" />
              </div>
            </div>
          </el-col>
          <el-col :span="6" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>采购到货及时率</span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="goodsArrivedOption" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div>
          <el-select
            v-model="purchaseDept"
            multiple
            collapse-tags
            placeholder="请选择部门"
            @change="getDeptTjListDo()"
            style="width: 60%">
            <el-option v-for="item in purchaseDeptList" :key="item.id + 1" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <el-row :gutter="20" :style="{ maxHeight: `${domHeight * 3 - 50}px`, overflowY: 'auto' }">
          <el-col v-for="(item, index) in deptTjList.ydata" :key="index" :span="24" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>{{ item.deptName }}</span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="deptTjItem(item.dataList, deptTjList.xdata)" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-row :gutter="20">
          <el-col :span="10" :xs="24" id="rightDom">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>采购种类与数量统计</span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="purchaseTypeQuantityOption" />
              </div>
            </div>
          </el-col>
          <el-col :span="14" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>延期清单</span>
              </div>
              <div class="card-content">
                <div class="card-yq">
                  <el-row class="card-yq-title" style="width: 100%; justify-content: space-between">
                    <el-col :span="3"><div class="grid-title">采购产品</div></el-col>
                    <el-col :span="3"><div class="grid-title">规格型号</div></el-col>
                    <el-col :span="3"><div class="grid-title">请购人员</div></el-col>
                    <el-col :span="3"><div class="grid-title">供应商</div></el-col>
                    <el-col :span="3"><div class="grid-title">数量</div></el-col>
                    <el-col :span="4"><div class="grid-title">期望交付日期</div></el-col>
                    <el-col :span="4"><div class="grid-title">预期交付日期</div></el-col>
                  </el-row>
                  <div class="card-scroll">
                    <vue3-seamless-scroll v-if="true" hover-stop="true" :list="deferredList" hover="true" step="0.3">
                      <el-row
                        v-for="(item, index) in deferredList"
                        :key="index"
                        style="width: 100%; justify-content: space-between">
                        <el-col :span="3">
                          <div class="grid-title grid-title-center">{{ item.itemName }}</div>
                        </el-col>
                        <el-col :span="3">
                          <div class="grid-title grid-title-center">{{ item.specification }}</div>
                        </el-col>
                        <el-col :span="3">
                          <div class="grid-title grid-title-center">{{ item.peopleOrMatter }}</div>
                        </el-col>
                        <el-col :span="3">
                          <div class="grid-title grid-title-center">{{ item.vendorName }}</div>
                        </el-col>
                        <el-col :span="3">
                          <div class="grid-title grid-title-center">{{ item.totalNum }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.wantTime }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.expectTime }}</div>
                        </el-col>
                      </el-row>
                    </vue3-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>供应商采购种类与数量统计</span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="supplierPurchaseTypeQuantityOption" />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <div class="data-screen-card" :style="{ height: Height }">
              <div class="card-title">
                <span>供应商采购次数</span>
              </div>
              <div class="card-content">
                <BiBaseChart :option="supplierPurchaseFrequencyOption" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- <el-col :span="7" :xs="24">
        <div class="data-screen-card" :style="{ height: Height }">
          <div class="card-title">
            <span>供应商一</span>
          </div>
          <div class="card-content">
            <BiBaseChart :option="supplierOneOption" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" :xs="24">
        <div class="data-screen-card" :style="{ height: Height }">
          <div class="card-title">
          </div>
          <div class="card-content">
            <BiBaseChart :option="supplierOneLdOption" />
          </div>
        </div>
      </el-col> -->

    <!-- <el-col :span="7" :xs="24">
        <div class="data-screen-card" :style="{ height: Height }">
          <div class="card-title">
            <span>供应商二</span>
          </div>
          <div class="card-content">
            <BiBaseChart :option="supplierTwoOption" />
          </div>
        </div>
      </el-col>
      <el-col :span="4" :xs="24">
        <div class="data-screen-card" :style="{ height: Height }">
          <div class="card-title">
          </div>
          <div class="card-content">
            <BiBaseChart :option="supplierTwoLdOption" />
          </div>
        </div>
      </el-col> -->
  </div>
</template>
<!-- 采购看板 -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {
  getCaiGouTypeCountTjList,
  getPurchaseTj,
  getDelayList,
  getPurchaseDeptList,
  getDeptTjList,
  getVendorTypeCountTjList,
  getVendorCiShu,
  getCaiGouTj,
  getTotalAmount,
} from '../api/bi';
import {
  onceBarChart,
  foldingColumnMixing,
  multipleHorizontalBar,
  singleHorizontalBar,
  instrumentPanel,
} from './components/echarts';
const Height = ref<any>('calc((var(--vh, 1vh) * 100 - 165px) / 3)');

defineOptions({
  name: 'Purchase',
});

const props = defineProps({
  type: {
    type: Number,
    default: 2, //统计类型:1-代表本周;2-代表本月;3-代表本年;4-代表自定义时间
  },
  timeRange: {
    type: Object,
    default: {
      startTime: '2024-03-01',
      endTime: '2024-03-30',
    }, //时间区间
  },
});

const loading = ref(false);

// 请购单据统计
const purchaseRequisitionOption = ref<any>(null);
// 采购统计
const purchaseOption = ref<any>(null);
// 采购到货及时率
const goodsArrivedOption = ref<any>(null);
// 采购种类与数量统计
const purchaseTypeQuantityOption = ref<any>(null);
//延期清单
const deferredList = ref<any>(null);
// 供应商采购种类与数量统计
const supplierPurchaseTypeQuantityOption = ref<any>(null);
//供应商采购次数
const supplierPurchaseFrequencyOption = ref<any>(null);
//入库金额
const totalAmountOfStorage = ref<any>(null);

//部门列表
const purchaseDeptList = ref<any>([]);
const purchaseDept = ref<any>(['all']);
const deptTjList = ref<any>([]);

// 获取右侧每项高 X 3 = 左侧最大高度
const domHeight = ref<any>('');

onMounted(() => {
  const rightDom: any = document.getElementById('rightDom');
  domHeight.value = rightDom.offsetHeight;
  window.addEventListener('resize', () => {
    loading.value = true;
    domHeight.value = rightDom.offsetHeight;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
});

/**
 * 获取页面数据
 * @param isTimeSwitch 是否是 时间切换
 */
const getPageData = (isTimeSwitch = false) => {
  getPurchaseTjDo();
  getCaiGouTjDo();
  getTotalAmountDo();
  getCaiGouTypeCountTjListDo();
  getDelayListDo();
  getVendorTypeCountTjListDo();
  getVendorCiShuDo();
  getPurchaseDeptListDo(isTimeSwitch);
};

const getPurchaseTjDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
    depts: [],
  };
  try {
    let { data } = await getPurchaseTj(ooo);
    purchaseRequisitionOption.value = onceBarChart(data);
  } catch (error) {
    console.log(error);
  }
};
const getCaiGouTjDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
  };
  try {
    let { data } = await getCaiGouTj(ooo);
    purchaseOption.value = onceBarChart(data);
  } catch (error) {
    console.log(error);
  }
};
const getTotalAmountDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
  };
  try {
    let { data } = await getTotalAmount(ooo);
    totalAmountOfStorage.value = Number(data[0].value);
    goodsArrivedOption.value = instrumentPanel(data[1].value);
  } catch (error) {
    console.log(error);
  }
};
const getPurchaseDeptListDo = async (isTimeSwitch=false) => {
  try {
    let { data } = await getPurchaseDeptList({});
    purchaseDeptList.value = data;

    // 切换筛选项 部门已选中不发生改变
    if(!isTimeSwitch) purchaseDept.value = [purchaseDeptList.value[0].id];
    
    getDeptTjListDo();
  } catch (error) {
    console.log(error);
  }
};

//处理部门图表数据
const deptTjItem = (ydata: any, xdata: any) => {
  return foldingColumnMixing({ xdata, ydata });
};
//各个部门统计
const getDeptTjListDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
    depts: purchaseDept.value ? purchaseDept.value.join(',') : [],
  };

  try {
    let { data } = await getDeptTjList(ooo);
    deptTjList.value = data;
  } catch (error) {
    deptTjList.value = [];
    console.log(error);
  }
};

const getCaiGouTypeCountTjListDo = async () => {

  let ooo = {
    ...props.timeRange,
    type: props.type,
    depts: [],
  };
  try {
    let { data } = await getCaiGouTypeCountTjList(ooo);

    purchaseTypeQuantityOption.value = foldingColumnMixing(data);
  } catch (error) {
    console.log(error);
  }
};

const getDelayListDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
    depts: [],
  };
  try {
    let { data } = await getDelayList(ooo);
    deferredList.value = data;
  } catch (error) {
    console.log(error);
  }
};
// 获取供应商采购种类与数量
const getVendorTypeCountTjListDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
  };
  try {
    let { data } = await getVendorTypeCountTjList(ooo);
    supplierPurchaseTypeQuantityOption.value = multipleHorizontalBar({ xdata: data.series, ydata: data.yaxis });
  } catch (error) {
    console.log(error);
  }
};
// 获取供应商采购种类与数量
const getVendorCiShuDo = async () => {
  let ooo = {
    ...props.timeRange,
    type: props.type,
  };
  try {
    let { data } = await getVendorCiShu(ooo);
    supplierPurchaseFrequencyOption.value = singleHorizontalBar({ xdata: data?.series, ydata: data?.yaxis });
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  getPageData,
});
</script>

<style lang="scss" scoped>
.box-purchase {
  position: relative;
  margin-top: 13px;
  height: 100%;
  &::before {
    position: absolute;
    top: -17px;
    bottom: 3px;
    left: 30px;
    z-index: 0;
    width: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-top: 3px solid #101f58;
    border-bottom: 3px solid #101f58;
  }

  &::after {
    position: absolute;
    padding: 0 30px;
    top: 30px;
    right: -17px;
    left: -17px;
    // left: 30px;
    z-index: 0;
    height: calc(100% - 60px);
    // width: calc(100% + 60px);
    pointer-events: none;
    content: '';
    border-right: 3px solid #101f58;
    border-left: 3px solid #101f58;
  }

  :deep() {
    .el-select__wrapper {
      background-color: #011320;
      box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
      .el-tag {
        background: #071332;
        box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
        color: #fff;
        max-width: none !important;
      }
    }
  }
}
.data-screen-card {
  // position: relative;
  width: 100%;
  min-height: 160px;
  margin-bottom: 20px;
  margin-top: 6px;
  // padding: var(--el-padding);
  // border: 3px solid #01ffff;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
  background: #011320;

  display: flex;
  flex-direction: column;

  .card-title {
    padding: 16px;
    padding-bottom: 0px;

    span {
      display: inline-block;
      text-align: left;
      height: 20px;
      padding-left: 10px;
      line-height: 20px;
      text-align: left;
      border-left: 3px solid #01ffff;
      width: 200px;
      white-space: nowrap;
      /* 确保文本在一行内显示 */
      overflow: hidden;
      /* 隐藏溢出的内容 */
      text-overflow: ellipsis;
      /* 使用省略号表示文本溢出 */
    }
  }

  .card-content {
    flex: 1;
    /* 占满剩余空间 */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .card-yq {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    .card-yq-title {
      height: 42px;
      background-image: url('../assets/images/u246.svg'); /* 替换为你的 SVG 文件路径 */
      background-repeat: repeat; /* 实现平铺效果 */
    }
  }

  .card-scroll {
    overflow: hidden;
    flex: 1;
  }

  .grid-title {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 12px;
    // height: 100%;
  }
  .grid-title.grid-title-center {
    color: #f1f2f6;
    font-size: 12px;
  }
}
</style>
